<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>IP查询工具</title>
    <link rel="stylesheet" href="./css/main.css">
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self';"> -->
     <style>
        /* .con-input {
    outline-style: none;
    border: 1px solid #c0c4cc;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    padding: 0;
    padding: 10px 15px;
    box-sizing: border-box;
    font-family: "Microsoft soft";
    &:focus {
        border-color: #f07b00;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px
                rgba(0, 0, 0, 0.075),
            #f07b00;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
            #f07b00;
    }
} */

     </style>
</head>

<body>
    <div class="container">
        <h1 class="title">IP检测</h1>
        <div class="content">
            <div class="input-group">
                <input class="con-input" type="text" id="ipInput" placeholder="请输入IP地址">
                <img class="con-clear" src="./img/clear.svg"  alt="">
            </div>
            <p id="message" class="message"></p>
            <button class="con-btn" id="queryBtn">查询</button>
            <!-- <button class="con-btn" id="queryBtn" onclick="search()">查询</button> -->
            <div class="con-main" id="result">
                <div class="main-empty">
                    <img src="./img/empty.svg" alt="">
                    <span>输入IP地址后，即可获取查询结果</span>
                </div>
                <div class="main-query">
                    <button class="query-copy"> <img src="./img/copy.svg" alt="">复制内容</button>
                    <div class="query-res">
                        <div class="res-title">
                            <span>国家信息</span>
                        </div>
                        <div class="res-content">
                            <p><span>大陆:&emsp;</span><span class="res" id="continent"></span> <span>国家:&emsp;</span><span class="res" id="country"></span></p>
                            <p><span>地区:&emsp;</span><span class="res" id="region"></span> <span>城市:&emsp;</span><span class="res" id="city"></span></p>
                            <p><span>货币:&emsp;</span><span class="res" id="currency"></span> <span>邮编:&emsp;</span><span class="res" id="postalCode"></span></p>
                        </div>
                    </div>
                    <div class="query-res">
                        <div class="res-title">
                            <span>地理时区</span>
                        </div>
                        <div class="res-content">
                            <p><span>经度:&emsp;</span><span  class="res" id="longitude"></span> <span>纬度:&emsp;</span><span class="res"  id="latitude"></span></p>
                            <p><span>时区:&emsp;</span><span class="res" style="width: 170px;"  id="timezone"></span></span></p>
                        </div>
                    </div>
                    <div class="query-res">
                        <div class="res-title">
                            <span>IP类型</span>
                        </div>
                        <div class="res-content">
                            <p><span>是否VPN:&emsp;</span><span  class="res" id="isVPN"></span> <span>是否托管:&emsp;</span><span class="res"  id="isHosted"></span></p>
                            <p><span>手机蜂窝:&emsp;</span><span  class="res" id="mobile"></span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <a href="https://www.baidu.com/" target="_blank">更多工具></a>
        </div>
    </div>
    <script nonce="randomString" src="./popup.js"></script>
</body>
</html>